<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <title>信息认证</title>
    <link rel="stylesheet" href="../../styles/h5/reset.min.css"/>
    <link rel="stylesheet" href="../../styles/h5/errortankuang.css"/>
    <link rel="stylesheet" href="../../styles/h5/bank.css"/>
    <!--以上为公共css样式-->
    <link rel="stylesheet" href="../../styles/h5/index.css"/>

    <script charset="utf-8" type="text/javascript" src="../../scripts/h5/jquery-1.9.1.min.js"></script>
    <script charset="utf-8" type="text/javascript" src="../../scripts/h5/jquery.modal.js"></script>
    <!--以上为公共js文件-->
</head>
<body>
<div class="zz-header">
    请输入银行卡信息
</div>
<div class="zz-list">
    <ul>
        <li>
            <span class="zz-left">银行名称</span
            ><span class="zz-bank-icon"></span
        ><span class="zz-right zz-bank-name">民生银行</span>
        </li>
        <li>
            <span class="zz-left">手机号码</span
            ><input class="zz-code-num zz-phone-code" type="tel" placeholder="请输入银行预留手机号" maxlength="11"/>
            <span class="zz-explain-icon"></span>
        </li>
        <li class="zz-position">
            <span class="zz-left">验证码</span
            ><input class="zz-code-num zz-verification-code" type="tel" placeholder="请输入验证码" maxlength="6"/>
            <input type="button" class="zz-code" value="获取验证码">
        </li>
    </ul>
</div>
<input class="footer zz-footTop" type="button" value="下一步">
<div class="zz-explain" style="display: none">
    <p class="zz-phone-explain">手机号说明</p>
    <div class="zz-bank-reserve">银行预留手机号码是办理该银行卡时所填写的手机号码。</div>
    <div class="zz-no-reserve">没有预留、手机号忘记或者已停用，请联系银行客服更新处理。</div>
    <span class="zz-know">知道了</span>
</div>
<div class="zz-mask" style="display: none"></div>
</body>
<script charset="utf-8" type="text/javascript" src="../../scripts/h5/utils.js"></script>
<script charset="utf-8" type="text/javascript" src="../../scripts/h5/index.js"></script>
<script charset="utf-8" type="text/javascript">
    var queryURLParameter = utils.queryURLParameter();
    var bankAccount = queryURLParameter.bankAccount;
    var binBankId = queryURLParameter.binBankId;
    var binBankName = queryURLParameter.binBankName;
    var page = queryURLParameter.page;
    var $bankName = $(".zz-bank-name");

    $bankName.html(binBankName);
    $(".zz-bank-icon").addClass(binBankId);

    //点击获取验证码 先判断手机格式对不对
    $code.click(function () {
        var that = $(this);
        //判断手机号
        if (!utils.effectivePhone($phone_code.val(), that)) {
            return false
        }

        var bankMobileId = utils.removeSpace($phone_code.val());
        $.ajax({
            url: utils.ajaxUrl()+"h5/settlementController/send",
            async: false,
            data: {
                bankMobileId: bankMobileId
            },
            type: 'get',
            success: function (res) {
            	var res = JSON.parse(res);
            	//console.log(res);
                if (res && res.retCode == '0000') {
                	//alert(res.verifyCode);
                    utils.effectivePhone($phone_code.val(), that, utils.time, that);
                    $footer.attr("trace", res.trace);
                } else {
                    new $.modal({
                        content: res.retMsg,//弹框内容
                        showcontent: true,//false为弹出框组件二，true为弹出框组件一
                    }).show(that);
                }
            }
        });
    });
    
    //    utils.changeValue($code_num,$footer,"bg");
    $footer.click(function () {
        //判断手机号
        if (!utils.effectivePhone($phone_code.val(), $footer)) {
            return false
        }

        //判断验证码
        if (!utils.effectiveNum($verification_code.val(), $footer)) {
            return false
        }
		//$footer.attr("disabled", "true");
		new $.modal({
            content: "加载中",
            animation: true//调用动画
        }).show();
        
        var bankMobileId = utils.removeSpace($phone_code.val());
        var code = $verification_code.val();
        var trace = $footer.attr("trace");
		
        $.ajax({
            url: utils.ajaxUrl()+"h5/settlementController/checkBinding",
            async: true,
            data: {
                bankAccount: bankAccount,
                bankMobileId: bankMobileId,
                code: code,
                binBankId: binBankId,
                trace: trace,
                bankName: binBankName
            },
            type: 'get',
            success: function (res) {
            	var res = JSON.parse(res);
            	//alert(res.retCode);
                if (res && res.retCode == '0000') {
                    window.location.href = "../../html/h5/bankBindSuccess.html?change="+queryURLParameter.change+ "&page=" + page;
                    //$footer.removeAttr("disabled");
                    new $.modal({
            			animation: true,//调用动画
        			}).hide();
                } else {
                	new $.modal({
            			animation: true,//调用动画
        			}).hide(0);
                    new $.modal({
                        content: res.retMsg,//弹框内容
                        showcontent: true,//false为弹出框组件二，true为弹出框组件一
                    }).show($footer);
                    
                }
            }	
        });
    });
</script>
</html>